<template>
  <div class="inner_content">
    <el-form :model="formData" label-width="120px">
      <el-form-item label="发布编号：">
        <el-input v-model="formData.serverName"></el-input>
      </el-form-item>
      <el-form-item label="审核人：">
        <el-input v-model="formData.scriptPath"></el-input>
      </el-form-item>
      <el-form-item label="发布标题：">
        <el-input v-model="formData.serverIp"></el-input>
      </el-form-item>
      <el-form-item label="审核日期：">
        <el-input v-model="formData.memo"></el-input>
      </el-form-item>
      <el-form-item label="发布人：">
        <el-input v-model="formData.managerUrl"></el-input>
      </el-form-item>
      <el-form-item label="审核状态：">
        <el-input v-model="formData.scriptPath"></el-input>
      </el-form-item>
      <el-form-item label="发布日期：">
        <el-input v-model="formData.scriptPath"></el-input>
      </el-form-item>
      <el-form-item label="审核意见：">
        <el-input v-model="formData.scriptPath"></el-input>
      </el-form-item>
      <el-form-item label="选择对象：">
        <el-input v-model="formData.organization" @focus="handleDialogShow"></el-input>
      </el-form-item>
      <el-form-item label="发布内容：">
        <el-input type="textarea" v-model="formData.scriptPath"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleSave">提交审核</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" :show-close="false">
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancelSelect">取 消</el-button>
        <el-button type="primary" @click="handleSaveSelect">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {mixins} from "@/core";

  export default {
    mixins: [mixins],
    data () {
      return {
        API: {
          save: "/gafe/save_server"
        },
        formData: {
          id: 0,
          serverName: "",
          serverIp: "",
          managerUrl: "",
          scriptPath: "",
          state: false,
          memo: "",
          organization: ""
        },
        dialogVisible: false,
        cities: [],
        checkedCities: [],
        checkAll: false,
        checkedCitiesCopy: []
      }
    },
    methods: {
      handleDialogShow () {
        this.dialogVisible = true;

        // 备份
        this.checkedCitiesCopy = [...this.checkedCities];

        if (this.cities.length > 0) {
          this.checkAll = this.checkedCities.length === this.cities.length;
        } else {
          this.$.ajax({
            url: "http://localhost:8090/static/hospital.json",
            success: (data) => {
              this.cities = data;
            }
          });
        }
      },
      handleCheckAllChange(event) {
        this.checkedCities = event.target.checked ? this.cities : [];
      },
      handleCheckedCitiesChange(value) {
        this.checkAll = value.length === this.cities.length;
      },
      handleCancelSelect () {
        this.dialogVisible = false;

        this.checkedCities = [...this.checkedCitiesCopy];
      },
      handleSaveSelect () {
        this.dialogVisible = false;

        this.formData.organization = this.checkedCities.toString();
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-input, .el-select {
    width: 344px;
  }

  .el-form-item {
    width: 48%;
    display: inline-block;

    /deep/ .el-form-item__label {
      color: #9a9a9a;
    }

    &:last-child, &:nth-last-child(2) {
      width: 100%;
      text-align: right;
      padding-right: calc(52% - 120px - 344px - 3px);
      box-sizing: border-box;
    }

    &:nth-last-child(2) {
      /deep/ .el-textarea__inner {
        width: 100%;
        height: 266px;
      }
    }
  }

  .el-button--default {
    border-color: #54adf6;
    color: #54adf6;
  }

  .el-dialog {
    .el-button {
      height: 40px;
      padding: 11px 30px;

      &.el-button--primary {
        background-color: #208aeb;
        border-color: #208aeb;
      }
    }

    .el-checkbox-group {
      height: 300px;
      overflow: auto;
    }
  }

  .el-checkbox {
    margin: 8px;
  }
</style>
